<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="MobileOptimized" content="320">
<title>无标题文档</title>
	<link href="css/chat.css" rel="stylesheet" type="text/css">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/iscroll.js"></script>
	<script src="js/audio.js"></script>	
	<script src="js/jquery-1.11.1.min.js"></script>
	<script>

	$(function(){
		
		var top = 0;
		var bot = 0;
		var height = 0;
		$("#thead_fix").each(function(){
			top += $(this).height();
		});
		console.log(top);
		$("#scroller").css("margin-top",top);
		
		$("#footer").each(function(){
			bot += $(this).height();
		});
		console.log(bot);
		$("#scroller").css("margin-bottom",bot);
			
		
		height += $(window).height()-($("#thead_fix").height()+$(".footer").height())
		console.log(height);
		$("#cont").css("height",height);
	
		var myScroll = new IScroll('#m_top', { mouseWheel: true });
		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
	})
	
	
		var setTime;
        function aud_play(obj) {
            var audioimg2="#img2";
            $("#img1").hide();
            $("#img2").show();
            setTime=setTimeout('aud_pause("#img2")', 10000);
            
            document.getElementById("aud").play();
            
        }
        function aud_pause(obj) {
            clearTimeout(setTime);
            $("#img2").hide();
            $("#img1").show();
            document.getElementById("aud").pause();
        }
	
	function setControl(){
 		var video=document.getElementById("video");
		video.controls=false;
		video.play();
	}
		
    </script>	
		
</head>
<body onload="loaded()">
    <div class="wrapper" id="wrapper1" >

		<div class="content activity singlepage">
	    
	    	<div class="thead_fix" id="thead_fix" style="z-index:999; display:   ;">
	        
	        	<!--返回按钮-->
	                
	            <a href="#" class="arrow">
	                                
	                <div class="img">
	                
	                    <img src="images/ret.png"/>
	                    
	                </div>
	
	            </a>
	            
	            <!--返回按钮end-->
	    
	            <div class="m">
	            	<span class="st">
	                	<span class="bt">手工小坊</span>
	                </span>
	            </div>
	            
	            
	            <a href="#" class="menus1">
	                                
	                <div class="img">
	                
	                    
	                </div>
	
	            </a>
	            
	        
	        </div>
	        
	        <div class="tbody" id="tbody">
	        	
				
					
	        	<div class="activity details" id="m_top"  style=" width: 100%; max-width: 640px; min-width: 320px; bottom: 0; height: auto;">
	        		<div id="scroller">
	        		<ul class="cont" id="cont">
						
						<li><img src="http://www.dingdangpai.com/static/images/log.png" class="imgright">
							
							<span class="spanright">

								111
								
							</span>
							
						</li>
						<li><img src="http://www.dingdangpai.com/static/images/log.png" class="imgleft">
							
							<span class="spanleft">

								<img src="images/act5.jpg" />
								
							</span>
							
						</li>
						<li><img src="http://www.dingdangpai.com/static/images/log.png" class="imgleft">
							
							<div class="username">叮叮当当</div>
							<span class="spanleft">

								<img src="images/1.png" />
								
							</span>
							
						</li>
						
						<li><img src="http://www.dingdangpai.com/static/images/log.png" class="imgleft">
							
							<span class="spanleft">

								<img src="images/act2.jpg" />
								
							</span>
							
						</li>
						
						<li><img src="http://www.dingdangpai.com/static/images/log.png" class="imgleft">
							
							<span class="spanleft">
								
								<div class="voice" style="width: 100px;">
									
									<!--<audio src="song.ogg" controls="controls"  class="audio"></audio>-->
									<audio src="xx.mp3" id="aud"></audio>
									<a href="#" class="ablock" id="img1" onclick="aud_play()">
										
										<img src="images/2x.png" class="audioimg1" />
										
									</a>
								
									<a href="#" class="ablock" id="img2" onclick="aud_pause()" style="display: none;" >
										
										<img src="images/2x.gif" class="audioimg2"/>
										
									</a>
									
								</div>
								
								
								
							</span>
							
							<span class="spantime">2” <i class="noread"></i></span>
							
							
						</li>
						
						
						<li><img src="http://www.dingdangpai.com/static/images/log.png" class="imgleft">
							
							<span class="spanleft">

								<video src="http://www.w3school.com.cn/i/movie.ogg" id="video" onclick="setControl()"></video>
								
							</span>
							
						</li>
						
					
					</ul>
	        		
	        	</div>
	        
	        </div>

	        </div>
	        
			
			
	        <div class="footer" id="footer">
	        	
	            <div class="trip">
	            	
	            	<input id="text" type="text" placeholder="说点什么吧...">
	            	<span id="btn">发送</span>
	            	
	            </div>
	            
	            
	        </div>
	        
	        
	        
	        <div class="fl" style="display: none;">
	        
	        	<div class="pic">
	        		<img src="images/log22.png" /><br /><br />
	        		<span>加载中... ...</span>
	        	</div>
	        
	        </div>
	        
	            
        </div>
    </div>
    
    
    
    
    
    <script>
        window.onload = function(){
            var arrIcon = ['http://www.dingdangpai.com/static/images/log.png'];
            var num = 0;     //控制头像改变
            var iNow = -1;    //用来累加改变左右浮动
            /*var icon = document.getElementsByTagName(' ');*/
            var btn = document.getElementById('btn');
            var text = document.getElementById('text');
            var cont = document.getElementsByTagName('ul')[0];
            var img = cont.getElementsByTagName('img');
            var span = cont.getElementsByTagName('span');

            /*icon[0].onclick = function(){
                if(num==0){
                    this.src = arrIcon[1];
                    num = 1;
                }else if(num==1){
                    this.src = arrIcon[0];
                    num = 0;
                }                
            }*/
            btn.onclick = function(){
                if(text.value ==''){
                    alert('不能发送空消息');
                }else {
                    cont.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
                    iNow++;
                    if(num==0){
                        img[iNow].className += 'imgright';
                        span[iNow].className += 'spanright';
                    }else {
                        img[iNow].className += 'imgleft';
                        span[iNow].className += 'spanleft';
                    }
                    text.value = '';
					// 内容过多时,将滚动条放置到最底端
					cont.scrollTop=cont.scrollHeight;  
                }
            }
        }
	</script>
    
</body>
</html>